<template>
	<div style="width: 84%;margin: 0 auto; line-height:auto">
		<slot name="header">
			
			<div  class="content">
				<div class="njsx_logo" style="width:2.8rem">	
					<img src="static/image/ning_logo.png" style="width: 100%;"/>
				</div>
				<div v-if="!getHomeAddressNow" class="titleName">
					<i class="icon njfont nj-ditu" style="display: block;" @click.stop="toMap"></i>
					<span @click="showPop" class="title">
						<span v-if="getUseMapFlag == 3">{{homeStore.storeName}}</span>
						<span v-if="getUseMapFlag == 2">
							<img src="static/image/homeLoading.gif"  style="width: 0.8rem;height: 0.8rem;display: inline-block;vertical-align:middle;"/>
							<span style="font-size:0.7rem;color:#9A9A9A;">定位中</span>
						</span>
						<span v-if="getUseMapFlag == 1" @click="reLoad">
							<img src="static/image/homeReload.png"  style="width: 19px;height: 16px;display: inline-block;vertical-align:middle;"/>
							<span style="font-size: 16px;color:#9A9A9A;">定位失败</span>
						</span>
					</span>
					<i class="icon njfont nj-down-trangle" style="display: block;font-size: 0.5rem;" @click="showPop"></i>
				</div>
				<div  v-if="getHomeAddressNow" class="titleName">
					<i class="icon njfont nj-ditu" style="display: block;" @click.stop="toMap"></i>
					<span @click="showPop" class="title">{{homeAddress.address}}</span>
					<i class="icon njfont nj-xiala" style="display: block;font-size: 0.5rem;" @click="showPop"></i>
				</div>
				<div @click="toSeach" class="toSeach">
					<i class="icon njfont nj-sousuo" style="font-size: 1.35rem;color:#444; opacity:0.7"></i>
				</div>
			</div>
			
		</slot>
		
	</div>
</template>

<script>
	import { mapMutations, mapGetters } from 'vuex';
	import TopPopup from '../../real-components/topPopup';
	export default {
		props: {
			

		},
		components: {
			"TopPopup":TopPopup
		},
		computed: {
			...mapGetters('zx', [
				"getIsShow","getHomeStoreNow","getHomeAddressNow","getUseMapFlag"
			]),
			...mapGetters('wxh', {
		        login: "login",
		        userInfo: 'userInfo',
		        sessionId: 'sessionId'
		    }),
		    homeStore(){
		    	if(this.getHomeStoreNow){
		    		return this.getHomeStoreNow;
		    	}else{
		    		return {};
		    	}
		    },
		    homeAddress(){
		    	if(this.getHomeAddressNow){
		    		return this.getHomeAddressNow;
		    	}else{
		    		return {}
		    	}
		    },
		    zxPageHeight(){
				return window.environment === "edit" ? 600 : window.screen.height;
			},
			zxPageWidth(){
				return window.environment === "edit" ? 375 : window.screen.width;
			},
		    
		},
		watch: {
			getUseMapFlag(newVal,oldVal){
				console.log(newVal,oldVal,'定位变化')
			}
		},
		data() {
			return {
				isShow:false,
				storeNow:null,
				addressNow:null,
				showReload:false
			}
		},
		created() {

		},
		beforeDestroy() {
			this.setIsShow(false);
		},
		methods: {
			...mapMutations('zx',[
				"setIsShow"
			]),
			toSeach(){
				this.$router.push('searcher');
			},
			toMap(){
				if(this.login){
					this.$router.push('map')
				}
			},
			reLoad(){
				localStorage.removeItem('lng');
				localStorage.removeItem('lat');
				location.reload();
			},
			//展示遮罩层
			appendCover(){
				var myPopup = document.querySelector('.nav_root');
//				return;
				if(!document.getElementById('zxHomeCover')){
					var node = document.createElement('div')
					let nodeStyle = `opacity: 0;display: none;position: absolute;left: 0;top:3rem;z-index:1;touch-action: none;width:${this.zxPageWidth}px;height:${this.zxPageHeight}px;background: black;`;
					node.style = nodeStyle;
					node.id = 'zxHomeCover';
					myPopup.appendChild(node);
					//此处使用setTimeOut 是因为改变样式会造成回流 导致动画出不来 所以强制用两个线程
					node.style.display = "block";
					setTimeout(() => {
						node.style.transition = "opacity 0.3s";
						node.style.opacity = "0.5";
					}, 0);
					var that = this;
					node.addEventListener("click", function(){ 
//						console.log("测试"); 
						that.showPop();
					} , false); 
					
				}
			},
			//隐藏遮罩层
			removeCover(){
				if(document.getElementById('zxHomeCover')){
					document.getElementById('zxHomeCover').remove(0);
				}
			},
			showPop(){	
//				console.log(document.getElementById('addressList').style,'动态读取高度')
					if(this.login){
						if(this.getIsShow){
							this.setIsShow(false);
							this.removeCover();
							console.log(123)
						}else{
							this.setIsShow(true);
							this.appendCover();
							console.log(456)
						}
					}
			},
			
		},

	}
</script>

<style scoped="scoped">
	.content{
		width: 80%;
		display: flex;
		align-items: center;
		justify-content:space-between;
		margin: 0 auto;
		flex-direction: row !important;
		margin-left: 1.5rem;
	}
	.titleName{
		width: 50%;
		display: flex;
		align-items: center;
		justify-content:space-between;
		border: 1px solid #eaeaea;
		border-radius: 3px;
		font-size: 0.7rem;
		color:#a0a0a0;
		margin: 0 0.35rem;
		padding: 0.1rem 0.2rem 0.1rem 0.1rem
	}
	.titleName .nj-ditu{
		font-size: 0.8rem
	}
	.title{
		display: block;
		width: 5rem;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		line-height: 1rem;
		text-align: left;
		padding-left: 0.1rem
	}
	.toSeach{
		padding-top: 0.2rem;
		line-height: 2.8rem
	}
	.toSeach i{ margin-top: 0.1rem}
</style>